import React from "react";
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";

export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: props.match.params.type === "-1" ? 1 : props.match.params.type,
      menu: [],
      hasMore: true,
      data: [],
      action: STATS.init,
      page: 1,
    };
  }
  componentDidMount() {
    document.title = "水晶兑换";
    this.getType();
  }
  getType() {
    global.Ajax.hhtc_request("home/more_cate", {}).then((data) => {
      console.log('data: ', data);
      if (data.code === 1) {
        if (this.state.type === 1) {
          var type = data.data[0].id;
          this.setState({
            type: type,
          });
        }
        this.setState({
          menu: data.data,
        });
        this.getList();
      }
    });
  }
  changeType(type) {
    this.setState(
      {
        type,
      },
      () => {
        this.getList();
      }
    );
  }
  getList() {
    var req = {
      page: 1,
      size: 12,
     
    };
    global.Ajax.hhtc_request("home/product_crystal", req).then((data) => {
      
      console.log('data: ', data);
      if (data.code === 1) {
        var hasMore;
        if (data.data.length > 0) {
          this.state.page++;
          hasMore = true;
        } else {
          hasMore = false;
        }
        this.setState({
          data: data.data.data,
          hasMore: hasMore,
          page: this.state.page,
        });
      }
    });
  }
  // 获取商品
  handleAction = (action) => {
    console.info(action, this.state.action, action === this.state.action);
    //new action must do not equel to old action
    if (action === this.state.action) {
      return false;
    }
    if (action === STATS.refreshing) {
      //刷新
      this.handRefreshing();
    } else if (action === STATS.loading) {
      //加载更多
      this.handLoadMore();
    } else {
      //DO NOT modify below code
      this.setState({
        action: action,
      });
    }
  };
  // 刷新
  handRefreshing = () => {
    if (STATS.refreshing === this.state.action) {
      return false;
    }
    var req = {
      page: 1,
      size: 12,
      id: this.state.type,
    };
    global.Ajax.hhtc_request("home/cate_product", req).then((data) => {
      console.log('data: ', data);
      if (data.code === 1) {
        var hasMore;
        if (data.data.length > 0) {
          this.state.page++;
          hasMore = true;
        } else {
          hasMore = false;
        }
        this.setState({
          data: data.data.data,
          hasMore: hasMore,
          action: STATS.refreshed,
          page: this.state.page,
        });
      }
    });
    this.setState({
      action: STATS.refreshing,
    });
  };
  // 加载更多
  handLoadMore = () => {
    if (STATS.loading === this.state.action) {
      return false;
    }
    //无更多内容则不执行后面逻辑
    if (!this.state.hasMore) {
      return;
    }
    var req = {
      page: this.state.page,
      size: 12,
      id: this.state.type,
    };
    global.Ajax.hhtc_request("home/cate_product", req).then((data) => {
      if (data.code === 1) {
        if (data.data.length > 0) {
          this.setState({
            data: this.state.data.concat(data.data.data),
            action: STATS.reset,
          });
        } else {
          this.setState({
            action: STATS.reset,
            hasMore: false,
          });
        }
      }
    });
    this.setState({
      action: STATS.loading,
    });
  };
  render() {
    return (
      <div className='bxxx'>
        			<ReactPullLoad
					downEnough={100}
					action={this.state.action}
					handleAction={this.handleAction}
					hasMore={this.state.hasMore}
					distanceBottom={100}
				>
					<div className='index_lj_list'>
						{this.state.data.map((item,index)=>{
							return(
								<div key={'list'+index} className='item' onClick={()=>{this.props.history.push('/page/home/learn/learndetail/'+item.id)}}>
									<div className='picbox'>
										<img alt='' src={item.img} className='pic' />
									
									</div>
									<div className='right'>
										<p className='title'>{item.title}</p>
										<p className='desc'>{item.info}</p>
										<p className='peop'>{item.author}</p>
										<div className='flex'>
											<p className='pri'>消耗{item.z_price*1000/1000}颗水晶</p>
                      {/* { <img alt='' className='bq' src={require('../../imgs/999.png')}/>
                      } */}
											<p className='play_btn'>
												
												<span>兑换</span>
											</p>
										</div>
									</div>
								</div>
							)
						})}
					</div>
				</ReactPullLoad>
      </div>
    );
  }
}
